<template>
  <div class="demo">
    zoom: {{zoom }}
    <textarea rows="5" cols="250" id="showPoint" v-model="textarea"></textarea>
    <div class="func">
      <button @click="pointInPolygon">判断点在多边形内</button>
    </div>
    <div class="map-container">
      <div class="map" :id="mapId"/>
    </div>
  </div>
</template>

<script>
  import {wgs84ToBd09, wgs84ToGcj02} from '@/common/lonlat-convertor';
  import {initMap} from '@/common/baidu-map';

  const normalStyle = {
    enableEditing: false, // 是否启用线编辑，默认为false
    strokeWeight: '1', // 折线的宽度，以像素为单位
    strokeOpacity: 1, // 折线的透明度，取值范围0 - 1
    strokeColor: '#E7E7E7' // 折线颜色
  };

  const warnStyle = {
    enableEditing: false, // 是否启用线编辑，默认为false
    strokeWeight: '5', // 折线的宽度，以像素为单位
    strokeOpacity: 0.8, // 折线的透明度，取值范围0 - 1
    strokeColor: '#FF0000' // 折线颜色
  };

  const lineStyle = {
    enableEditing: false, // 是否启用线编辑，默认为false
    // // ICONS 不能复用
    // icons: [new BMap.IconSequence(new BMap.Symbol(window.BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
    //   scale: 0.5, // 图标缩放大小
    //   strokeColor: '#fff', // 设置矢量图标的线填充颜色
    //   strokeWeight: '2' // 设置线宽
    // }), '10', '30')],
    strokeWeight: '5', // 折线的宽度，以像素为单位
    strokeOpacity: 0.2, // 折线的透明度，取值范围0 - 1
    strokeColor: 'red' // 折线颜色
  };

  const polylineStyle = {
    enableEditing: true, // 是否启用线编辑，默认为false
    strokeWeight: '3', // 折线的宽度，以像素为单位
    strokeOpacity: 1, // 折线的透明度，取值范围0 - 1
    strokeColor: 'red' // 折线颜色
  };

  const styleOptions = {
    strokeColor: 'red', // 边线颜色。
    fillColor: 'red', // 填充颜色。当参数为空时，圆形将没有填充效果。
    strokeWeight: 3, // 边线的宽度，以像素为单位。
    strokeOpacity: 0.8, // 边线透明度，取值范围0 - 1。
    fillOpacity: 0.6, // 填充的透明度，取值范围0 - 1。
    strokeStyle: 'solid' // 边线的样式，solid或dashed。
  };

  export default {
    name: 'Tool',
    data () {
      return {
        textarea: '',
        mapId: `map${Number.parseInt(Math.random() * 999999, 10)}`,
        map: null,
        zoom: 15,
        line: null,
        lineStyle: null,
        markerMap: {}
      };
    },
    mounted () {
      this.$nextTick(() => {
        const zoom = this.zoom;
        const BMap = window.BMap;
        const BMapLib = window.BMapLib;
        const centerPoint = wgs84ToGcj02(106.47658600000005, 29.674256000000003);
        const map = this.map = initMap(this.mapId, [centerPoint.lon, centerPoint.lat], zoom);

        const overlays = [];

        // 实例化鼠标绘制工具
        const drawingManager = new BMapLib.DrawingManager(map, {
          isOpen: false, // 是否开启绘制模式
          enableDrawingTool: true, // 是否显示工具栏
          drawingToolOptions: {
            anchor: window.BMAP_ANCHOR_TOP_RIGHT, // 位置
            offset: new BMap.Size(5, 5) // 偏离值
          },
          circleOptions: styleOptions, // 圆的样式
          polylineOptions: styleOptions, // 线的样式
          polygonOptions: styleOptions, // 多边形的样式
          rectangleOptions: styleOptions // 矩形的样式
        });

        // 添加鼠标绘制工具监听事件，用于获取绘制结果
        drawingManager.addEventListener('overlaycomplete', (e) => {
          const {drawingMode, overlay} = e;
          console.log(e);
          // 多边形
          if (drawingMode === 'polygon' || drawingMode === 'rectangle') {
            this.textarea = JSON.stringify(overlay.getPath());
          } else if (drawingMode === 'marker') {
            this.textarea = JSON.stringify(overlay.getPosition());
          }
          overlays.push(overlay);
        });
      });
    },
    methods: {
      pointInPolygon () {
        const BMap = window.BMap;
        const BMapLib = window.BMapLib;
        const points = [{'lng': 106.49058, 'lat': 29.675506}, {'lng': 106.491119, 'lat': 29.676039}, {
          'lng': 106.484184,
          'lat': 29.682096
        }, {'lng': 106.482261, 'lat': 29.680323}, {'lng': 106.483573, 'lat': 29.679413}, {
          'lng': 106.484238,
          'lat': 29.678205
        }, {'lng': 106.484255, 'lat': 29.677342}, {'lng': 106.483429, 'lat': 29.675302}, {
          'lng': 106.488675,
          'lat': 29.673811
        }, {'lng': 106.488675, 'lat': 29.673811}];
        const pts = [];
        points.forEach(item => {
          pts.push(new BMap.Point(item.lng, item.lat));
        });
        const polygon = new BMap.Polygon(pts);
        const point = new BMap.Point(106.486681, 29.678173);
        const result = BMapLib.GeoUtils.isPointInPolygon(point, polygon);
        if (result === true) {
          alert('点在多边形内');
        } else {
          alert('点在多边形外');
        }
        const marker = new BMap.Marker(point);
        this.map.addOverlay(marker);
        this.map.addOverlay(polygon);
      }
    }
  };
</script>
<style scoped>
  .func {
    padding: 10px 0;
  }
</style>
